<!-- components/footer-menu.vue -->
<template>
    <view class="footer-menu">
        <!--tabbar-->
        <view class="tui-tabbar">
            <block v-for="(item, index) in tabbar" :key="index">
                <view
                    class="tui-tabbar-item"
                    :class="[tabCur == item.type ? 'tui-item-active' : '']"
                    :data-type="item.type"
                    @tap="tabbarSwitch"
                >
                    <view :class="[index == 0 ? 'tui-ptop-4' : '']">
                        <tui-icon
                            :name="
                                tabCur == item.type
                                    ? item.icon + '-fill'
                                    : item.icon
                            "
                            :color="tabCur == item.type ? '#E41F19' : '#666'"
                            :size="item.size"
                        ></tui-icon>
                    </view>
                    <view class="tui-scale">{{ item.text }}</view>
                </view>
            </block>
        </view>
        <!--tabbar-->
    </view>
</template>

<script>
import footerMenu from "@/components/footer-menu.vue";
import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue";

export default {
    name: "footer-menu",
    components: {
        tuiIcon,
    },
    props: {
        //选中的tab
        tabCur: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {
            //底部导航栏tabbar
            //	tabCur: 1,
            tabbar: [
                { icon: "home", text: "首页", size: 21, type: 0 },
                { icon: "service", text: "发现", size: 24, type: 1 },
                { icon: "category", text: "分类", size: 24, type: 3 },
                { icon: "people", text: "我的", size: 24, type: 2 },
            ],
        };
    },
    methods: {
        //底部导航栏tabbar
        tabbarSwitch: function (e) {
            let type = e.currentTarget.dataset.type;
            this.tabCur = type;
            if (type == 0) {
                uni.switchTab({ url: "/pages/site/index" });
            } else if (type == 1) {
                uni.switchTab({ url: "/pages/shop/index" });
            } else if (type == 3) {
                uni.switchTab({ url: "/pages/goods/cate" });
            } else if (type == 2) {
                uni.switchTab({ url: "/pages/my/index" });
            }
        },
    },
};
</script>

<style scoped>
/*tabbar*/
.tui-tabbar {
    width: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 99999;
    background: #fff;
    height: 100rpx;
    left: 0;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
}
.tui-safearea-bottom {
    width: 100%;
    height: env(safe-area-inset-bottom);
}
.tui-tabbar::before {
    content: "";
    width: 100%;
    border-top: 1rpx solid #d9d9d9;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.tui-tabbar-item {
    flex: 1;
    width: 25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    font-size: 24rpx;
    color: #666;
    height: 80rpx;
}
.tui-ptop-4 {
    padding-top: 4rpx;
}
.tui-scale {
    font-weight: bold;
    transform: scale(0.8);
    transform-origin: center 100%;
    line-height: 30rpx;
}
.tui-item-active {
    color: #e41f19 !important;
}
/*tabbar*/

/* .footer-menu {
	  display: flex;
	  justify-content: space-around;
	  position: fixed;
	  bottom: 0;
	  width: 100%;
	  background-color: #fff;
	  border-top: 1px solid #eee;
	} */

/* .menu-item {
	  padding: 10px;
	  text-align: center;
	} */
</style>
